<script setup lang="tsx">
import { getPayEnumApi, getListApi } from '@/api/order/pay'
import { useEnumeratePicker } from '@/utils'
const { t } = useI18n()
const { push } = useRouter()
import { ref } from 'vue'
// 使用具体类型定义 props
const props = defineProps({
  currentRow: {
    type: Object,
    default: () => null
  }
})
// 使用 ref 声明响应式变量 isExpanded
const isExpanded = ref(true)

// 切换展开/收起状态的方法
const togglePanel = () => {
  isExpanded.value = !isExpanded.value
}

// 定义 dataList 变量
const dataList = ref<any[]>([])
//初始化请求
const initialize = async () => {
  try {
    const params = {
      user_id: props.currentRow.id,
      pageIndex: 1,
      pageSize: 500
    }
    const resp = await getListApi(params)
    dataList.value = resp.data.list || []
  } catch (error) {}
}
//获取枚举
const optionSet = ref<Record<string, any>>({})
const getDropDownBoxInfo = async () => {
  const resp = await getPayEnumApi({ field: 'all' })
  optionSet.value = resp?.data || []
}
if (props.currentRow) {
  initialize()
  getDropDownBoxInfo()
}
//跳转
const handleJump = (type: string, row: Record<string, any>) => {
  const path = ref<string>('') // 默认值为空字符串
  const query = reactive<{ [key: string]: string }>({}) // 默认值为空字符串
  switch (type) {
    default:
      if (row.order_type === 'order') {
        path.value = `/order/order-management/${type}`
        query.id = row.order_id
      } else {
        path.value = `/order/wholesal-order-management/${type}`
        query.id = row.order_id
      }
      break
  }

  push({ path: path.value, query })
}
</script>

<template>
  <el-card shadow="always">
    <div @click="togglePanel" class="header cursor-pointer">
      <span>回款管理</span>
      <el-icon v-if="isExpanded">
        <el-icon-arrow-down />
      </el-icon>
      <el-icon v-else>
        <el-icon-arrow-right />
      </el-icon>
    </div>
    <el-collapse-transition>
      <div v-show="isExpanded" class="w-full">
        <el-table
          :data="dataList"
          highlight-current-row
          stripe
          border
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('orderPayment.orderCode')"
            prop="order_no"
            min-width="250"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              <el-link :underline="false" type="primary" @click="handleJump('detail', row)">
                {{ row.order_no }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column
            :label="t('orderPayment.theTypeOfOrder')"
            min-width="200"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(optionSet.order_type, row.order_type) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('orderPayment.theAmountOfTheOrder')"
            prop="total_amount"
            min-width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('orderPayment.orderStatus')"
            min-width="200"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(optionSet.order_status, row.order_status) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.paymentTime')"
            prop="pay_time"
            min-width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.theAmountToBePaid')"
            prop="paid_amount"
            min-width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.theAmountToBeshould')"
            prop="pay_amount"
            min-width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('orderPayment.paymentStatus')"
            min-width="200"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(optionSet.pay_status, row.pay_status) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('orderPayment.paymentType')"
            min-width="200"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(optionSet.pay_type, row.pay_type) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('orderPayment.currency')"
            min-width="200"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(optionSet.currency, row.pay_currency) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('orderPayment.remarks')"
            prop="notes"
            min-width="150"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
    </el-collapse-transition>
  </el-card>
</template>

<style scoped>
.header {
  display: flex;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 900;
  cursor: pointer;
  background-color: #f3f3f3;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;
}
</style>
